<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>消息通知</title>
    <!--<link rel="stylesheet" type="text/css" href="css/base.min.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />-->
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/layui/css/layui.css" media="all" />
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/css/baojia.css" />
    <script src="{:_SKIN}/user/layui/lay/dest/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">table,.layui-table th{ text-align: center; } .layui-table{ margin-top: -10px; } .layui-table td{ font-size: 12px; } .layui-tab-title a{ text-decoration: none; }</style></head>
  
  <body>
    <div class="content">
      <div class="titlebar">
        <div class="titlebar-name">消息通知</div></div>
      <div class="my-s-a-a" style="margin-top: 10px;">
        <input class="my-s-a-a-s" type="text" name="title" value="" onkeypress="" placeholder="输入产品标题">
        <input class="my-s-a-a-b" type="button" value="查找" onclick=""></div>
      <br />
      <br />
      <br />
      <br />
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">全部</li>
          <li>系统消息</li>
          <li>会员服务</li>
          <li>活动通知</li>
          <li>相关消息</li></ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                  <col width="200">
                    <col></colgroup>
              <thead>
                <tr>
                  <th>标题</th>
                  <th>时间</th>
                  <th>内容</th>
                  <th>
                    <select name="status" id="status" onchange="" style="font-weight: initial;">
                      <option value="">信息类型</option>
                      <option value="1">系统消息</option>
                      <option value="2">会员服务</option>
                      <option value="3">活动通知</option>
                      <option value="4">交易相关</option></select>
                  </th>
                  <th>操作</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>成功提交订单十月稻田旗舰店</td>
                  <td>2016-11-29</td>
                  <td>您已成功下单，订单编号：SH1708010519450007，金额：275.50</td>
                  <td>交易相关</td>
                  <td>
                    <a href="" style="color: red;">删除</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="layui-tab-item">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                  <col width="200">
                    <col></colgroup>
              <thead>
                <tr>
                  <th>退款编号</th>
                  <th>订单编号</th>
                  <th>买家</th>
                  <th>交易金额</th>
                  <th>退款金额</th>
                  <th>起始时-结束时</th>
                  <th>退款状态</th>
                  <th>操作</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>
                    <a href="" style="color: red;">删除</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="layui-tab-item">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                  <col width="200">
                    <col></colgroup>
              <thead>
                <tr>
                  <th>退款编号</th>
                  <th>订单编号</th>
                  <th>买家</th>
                  <th>交易金额</th>
                  <th>退款金额</th>
                  <th>起始时-结束时</th>
                  <th>退款状态</th>
                  <th>操作</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>
                    <a href="" style="color: red;">删除</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="layui-tab-item">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                  <col width="200">
                    <col></colgroup>
              <thead>
                <tr>
                  <th>退款编号</th>
                  <th>订单编号</th>
                  <th>买家</th>
                  <th>交易金额</th>
                  <th>退款金额</th>
                  <th>起始时-结束时</th>
                  <th>退款状态</th>
                  <th>操作</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>null</td>
                  <td>
                    <a href="" style="color: red;">删除</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="layui-tab-item">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                  <col width="200">
                    <col></colgroup>
              <thead>
                <tr>
                  <th>退款编号</th>
                  <th>订单编号</th>
                  <th>买家</th>
                  <th>交易金额</th>
                  <th>退款金额</th>
                  <th>起始时-结束时</th>
                  <th>退款状态</th>
                  <th>操作</th></tr>
              </thead>
              <tbody>
                <tr>
                  <td>2</td>
                  <td>2</td>
                  <td>2</td>
                  <td>2</td>
                  <td>2</td>
                  <td>2</td>
                  <td>2</td>
                  <td>
                    <a href="" style="color: red;">删除</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <script>//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element',
        function() {
          var element = layui.element();

          //…
        });</script>
    </div>
  </body>

</html>